<template>
  <div>
    <van-cell-group>
      <van-cell title="用户名" :value="opName" />
      <van-cell title="所属部门" :value="departName" />
      <van-cell title="密码设置" value="" @click="setPassword" />
    </van-cell-group>
    <!-- <circle-menu type="top" :circle='true' :number='2' style="border-radius:50%; position: absolute;bottom:60px;right:20px;">
      <a slot="item_1" @click="aa" herf="#" class="fa fa-twitter fa-lg"><van-icon name="success" /></a>
      <a slot="item_2" class="fa fa-twitter fa-lg">
        <div class="van-info van-badge__info" style="z-index:100">3</div>
        <van-icon name="shopping-cart" />
      </a>
    </circle-menu> -->
    <van-button style="margin-top: 20px;width: 90%;" size="large" @click="logout" type="primary">退出当前账号</van-button>
    <van-dialog
      v-model="show"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field
        v-model="password"
        type="password"
        label="原密码"
        placeholder="请输入原密码"
      />
      <van-field
        v-model="password1"
        type="password"
        label="新密码"
        placeholder="请输入新密码"
      />
      <van-field
        v-model="password2"
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
      />
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      password: '',
      password1: '',
      password2: '',
      departName: this.$store.state.userInfo.departName,
      opName: this.$store.state.userInfo.opName
    }
  },
  methods: {
    setPassword() {
      this.show = true;
    },
    aa() {
      alert(1);
    },
    logout() {
      this.$store.dispatch('FedLogOut');
      this.$router.replace('/login');
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000);
      } else {
        done();
      }
    }
  },
  mounted() {
    
  }
};
</script>

<style scoped>
  .van-cell-text {
    margin-right: 5px;
  }
  .van-cell-text,
  .van-tag--danger {
    vertical-align: middle;
  }
</style>